import { Icon } from "@chakra-ui/icons";

export const FileStatus = {
  modify: "modify",
  deleted: "deleted",
};

export default function FileStatusIcon(props: { status: string }) {
  const { status } = props;

  switch (status) {
    case FileStatus.modify:
      return (
        <Icon viewBox="0 0 30 30" fill="yellow.500">
          <path d="M0 23.0361C0 23.9858 0.766071 24.753 1.71429 24.753C2.6625 24.753 3.42857 23.9858 3.42857 23.0361H0ZM1.71429 2.43373L3.13929 1.47873C2.72143 0.850996 1.93929 0.56664 1.21607 0.786613C0.492857 1.00659 0 1.67724 0 2.43373H1.71429ZM12 17.8855L10.575 18.8405C10.8911 19.3181 11.4268 19.6024 12 19.6024C12.5732 19.6024 13.1089 19.3181 13.425 18.8405L12 17.8855ZM22.2857 2.43373H24C24 1.67724 23.5071 1.01195 22.7839 0.791979C22.0607 0.572005 21.2786 0.850996 20.8607 1.48409L22.2857 2.43373ZM20.5714 23.0361C20.5714 23.9858 21.3375 24.753 22.2857 24.753C23.2339 24.753 24 23.9858 24 23.0361H20.5714ZM3.42857 23.0361V2.43373H0V23.0361H3.42857ZM0.289286 3.38874L10.575 18.8405L13.4304 16.9359L3.14464 1.48409L0.289286 3.38874ZM13.4304 18.8405L23.7161 3.38874L20.8607 1.47873L10.575 16.9305L13.4304 18.8352V18.8405ZM20.5714 2.43373V23.0361H24V2.43373H20.5714Z" />
        </Icon>
      );

    case FileStatus.deleted:
      return (
        <Icon viewBox="0 0 48 16" fill="orange" fontSize={15} style={{ verticalAlign: "-2px" }}>
          <path d="M0 2C0 0.89375 0.89375 0 2 0H10C17.7312 0 24 6.26875 24 14C24 21.7312 17.7312 28 10 28H2C0.89375 28 0 27.1063 0 26V2ZM4 4V24H10C15.525 24 20 19.525 20 14C20 8.475 15.525 4 10 4H4Z" />
        </Icon>
      );

    default:
      break;
  }

  return <div>FileTypeIcon</div>;
}
